<template>
  <div class="footer">
    <div class="ng-promise-box">
      <div class="ng-promise">
        <p class="text">
          <a class="icon1" href="javascript:;">7天无理由退换货</a>
          <a class="icon2" href="javascript:;">满99元全场免邮</a>
          <a class="icon3" style="margin-right: 0" href="javascript:;">100%品质保证</a>
        </p>
      </div>
    </div>

    <!-- <div class="servece-type">
      <div class="servece-type-info" v-for="(guide, index) in guideArr" :key="index">
        <ul>
          <li v-for="(item, index) in guide" :key="index">{{item}}</li>
        </ul>
      </div>
    </div> -->
    <div class="clearfix"></div>
    <div class="mod_help">
      <p>
        Copyright ©2023
      </p>
      <a href="#" target="_blank">苏ICP备2021007871号-1</a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      guideArr: [
        ['购物指南', '购物流程', '会员介绍', '生活旅行', '常见问题', '大家电', '联系客服'],
        ['配送方式', '上门自提', '配送服务查询', '收取标准', '海外配送'],
        ['支付方式', '货到付款', '在线支付', '分期付款', '邮局汇款', '公司转账'],
        ['售后服务', '售后政策', '价格保护', '退款说明', '返修/退换货', '取消订单']
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
  /* 底栏容器CSS */
  .footer {
    width: 100%;
    text-align: center;
    background: #2a2c32;
    padding-bottom: 20px;
  }
  .footer .ng-promise-box {
    border-bottom: 1px solid #3d3d3d;
    line-height: 145px;
  }
  .footer .ng-promise-box {
    margin: 0 auto;
    border-bottom: 1px solid #3d3d3d;
    line-height: 145px;
  }
  .footer .ng-promise-box .ng-promise p a {
    color: #fff;
    font-size: 20px;
    margin-right: 210px;
    padding-left: 44px;
    height: 40px;
    display: inline-block;
    line-height: 40px;
    text-decoration: none;
    background: url('../../../assets/images/us-icon.png') no-repeat left 0;
  }

  .footer .mod_help {
    text-align: center;
    color: #888888;
    font-size: 14px;
  }
  .footer .mod_help p {
    margin: 20px 0 16px 0;
  }

  .footer .mod_help p a {
    color: #888888;
    text-decoration: none;
  }
  .footer .mod_help p a:hover {
    color: #fff;
  }
  .footer .mod_help p span {
    padding: 0 22px;
  }
  .footer .mod_help a {
    color: #888888;
  }

  .servece-type {
    margin: 15px auto;
    height: 200px;
    width: 800px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .servece-type-info {
    color: #888888;
  }
  .servece-type-info ul {
    list-style: none;
  }
  .servece-type-info li {
    font-size: 14px;
    cursor: pointer;
    line-height: 26px;
  }
  .servece-type-info li:first-child {
    font-size: 16px;
    line-height: 28px;
    font-weight: bold;
  }
  /* 底栏容器CSS END */
</style>